// 1.从安装的路由路面导入路由信息
// vue-router：安装的框架
// VueRouter是一个对象
// import Router from 'vue-router'//官方写的
import VueRouter from 'vue-router' //自己写的

// 3.导入Vue
import Vue from 'vue'

// 导入组件
// import HelloWorld from '@/components/HelloWorld'//官方案例
// import Home from '../components/Home.vue'
// import About from '../components/About' //简写形式
// import User from '../components/User'
// 使用路由懒加载 推荐
const Home = () => import('../components/Home.vue')
const About = () => import('../components/About.vue')
// 变量直接拿下去下面使用  代码比较乱
// const User = () => import('../components/User.vue')
const HomeNews = () => import('../components/HomeNews')
const HomeMessage = () => import('../components/HomeMessage')
const Profile = () => import('../components/Profile')


// 2.使用插件plugin，这里先安装插件Router
// Vue.use(Router)//官方写的
Vue.use(VueRouter) //自己写的

const routers = [{
    // 默认路径--默认路由,顺序放到最上面，位置比较特殊,放到后面也行，只是放前面好找
    // path: '/',
    path: '', //简写
    // component:Home//直接这样配置，对应网页的路径是不会改变的
    // 重定向：重新定义一个方向
    redirect: '/home' //默认显示组件
  },
  // 配置路由映射关系
  // url1:'匹配组件1'
  // url2:'匹配组件2'
  // 完整的url:协议头://主机名host/query等
  // 一个映射关系就是一个对象
  {
    // 路径里面出现/home，就显示下面的组件
    path: '/home', //使用相对路径
    // component: null
    component: Home,
    children:[
      // 默认显示
      {
        path: '', 
        redirect: '/news' 
      },
      {
        path:'news',//以后会自动拼接成/home/news的
        component:HomeNews
      },
      {
        path:'message',//以后会自动拼接成/home/news的
        component:HomeMessage
      }
    ]
  },
  {
    path: '/about',
    component: About
  },
  {
    // 不能随便在一个地址栏上拼接东西
    // 拼接东西需要使用动态路由
    path: '/user/:userId',
    component: () => import('../components/User.vue')
  },
  {
    path: '/profile',
    component: Profile
  }
]
// 4.创建VueRouter路由对象
// router是一个对象，和创建Vue实例一样
const router = new VueRouter({
  //传入一些选项options
  // routers对象，配置路由和组件之间的映射关系
  // routers:[] 由于嵌套关系太多，习惯这么写
  // routes:routers
  routes, //简写：ES6的增强写法
  mode: 'history', //模式，由原来默认的哈希模式(有#号)改为H5的history模式
  // 统一进行修改
  linkActiveClass: 'active' //以后谁处于活跃状态，就会应用上该class

})

// 5.将router对象传入到Vue实例
// router对象必须挂载到Vue实例上面，router对象才真正起效果
// 去到main.js里面(与router文件夹同级-在src目录下面)找到Vue实例进行挂载
// new Vue({  router:router  })  
// new Vue({  router })  //简写形式

// 6、导出router对象
// export default router

// 7、在main.js里面导入router对象
// import router from './router'//官方写的，简写
// import router from './router/index'//自己写的，会自动的去找router文件夹里面index.js文件

export default new Router({
  routes: [{
    path: '/',
    name: 'HelloWorld',
    component: HelloWorld
  }]
})
